<template>
	<div>
		<cus-modal ref="modal" title="添加BOM" @on-visible-change="onVisibleChange" @onOk="onOk" :width="420">
			<div>
		
				<Form ref="formValidate" :model="form" :label-width="120" :rules="ruleValidate">
					<FormItem label="食材分类" prop="materialClass">
						<Select v-model="form.materialClass" style="width: 200px" :disabled ="Boolean(form.materialName)" placeholder="请选择食材分类" clearable>
							<Option :value="item.name" v-for="(item, index) in materialTypeList" :key="index">{{ item.name
							}}</Option>
						</Select>
						
					</FormItem>
					<FormItem label="食材名称" prop="typeId">
						<cus-autoComplete :value.sync="form.type" key-label="materialName" key-value="materialId"
							placeholder="请输入食材名称选择食材" return-label="data" @onChange="changeTypeOption" @onClear="changeTypeOption"
							:cusParams="{ foodClass: form.materialClass }" fncLabel="materialName" pageSize="size"
							currentPage="current" :fnc="localFoodSearchNoCheck"></cus-autoComplete>
					</FormItem>
					<FormItem label="下料量(g/人份)" prop="weight">
						<InputNumber v-model="form.weight" clearable :max="100000" style="width: 200px"
							placeholder="请输入下料量(g/人份)">
						</InputNumber>
						<!-- <div v-if="weightWanging" class="warning">
							建议下料量大于10克
						</div> -->
					</FormItem>
					<FormItem label="折算比例(%)">
						<Input disabled clearable maxlength="20" v-model="form.convertPro" style="width: 200px" readonly
							placeholder="折算比例（选中食材后展示）"></Input>
					</FormItem>
					<FormItem label="损耗率(%)">
						<Input disabled clearable maxlength="20" v-model="form.storageLoss" style="width: 200px" readonly
							placeholder="损耗率（选中食材后展示）"></Input>
					</FormItem>
				</Form>
			</div>
			<div slot="footer">
				<div class="modal-footer">
					<cus-button size="small" class="mr_2" @onClick="onCancel">取消</cus-button>
					<cus-button type="primary" size="small" @onClick="onOk">添加</cus-button>
				</div>
			</div>
		</cus-modal>
	</div>
</template>

<script>
import {
	localFoodSearchNoCheck,
	materialType
} from '@/api/organ/dishesModule'

const form = {
	materialClass: '', // 食材分类
	materialId: '', // 食材ID
	materialName: '', // 食材名称
	specification: '克', // 单位
	weight: 10,
	convertPro: '', // 折算比例
	storageLoss: '', // 损耗率
	type: {
		materialName: '',
		materialId: ''
	}
}

export default {
	components: {},
	data() {
		return {
			materialTypeList: [], // 食材种类列表
			localFoodSearchNoCheck: localFoodSearchNoCheck,
			loading: false,
			form: this.$cu.deepClone(form),
			ruleValidate: {
				materialClass: [
					{
						required: true,
						message: '食材分类不能为空',
						trigger: 'change'
					}
				],
				typeId: [
					{
						required: true,
						validator: (rule, value, callback) => {
							if (!this.form.type.materialId) {
								return callback(new Error('食材分类不能为空.'))
							} else callback()
						},
						trigger: 'change'
					}
				],
				weight: [
					{
						required: true,
						type: 'number',
						message: '下料量不能为空',
						trigger: 'change,blur'
					},
					{
						required: true,
						min: 1,
						message: '下料量最低为1',
						trigger: 'blur,change',
						type: 'number',
					},
				],
			},

			addType: '',
			mainId: '',
			// 提示警告
			weightWanging: false,
		}
	},

	mounted() {
		this.form = this.$cu.deepClone(form)
	},
	methods: {
		onVisibleChange(v) {
			this.weightChange(form.weight)
			this.$refs['formValidate'].resetFields()
			if (!v) this.form = this.$cu.deepClone(form)
		},
		onCancel() {
			this.$refs['modal'].show = false
		},
		show() {
			this.$refs['modal'].show = true
			this.materialTypeApi()

		},
		onOk() {

			this.$refs['formValidate'].validate((valid) => {
				if (valid) {
					console.log(this.form)
					this.$emit('addItem', this.$cu.deepClone(this.form))
					setTimeout(() => {
						this.$refs['modal'].show = false
					}, 200)
				} else {

				}
			})
		},
		weightChange(value) {
			console.log(value);
			if (value && value < 10) {
				this.weightWanging = true
			} else {
				this.weightWanging = false
			}
			// new Promise(function (resolve, reject) {
			//     _self.$refs['formValidate'].validateField("weight", (error) => {
			// 		console.log(error);
			//         resolve(error)
			//     })
			// }).then((data)=>{
			//     if(!data.length){
			//          flag = true
			//     }
			// })

		},
		// 选项切换
		changeTypeOption(option) {
			console.log(option);
			if(option) {
				this.form.materialClass = option.foodClass
			this.form.materialName = option.materialName
			this.form.materialId = option.materialId
			this.form.convertPro = option.convertPro
			this.form.storageLoss = option.storageLoss
			} else {
				this.form.materialClass = ''
			this.form.materialName = ''
			this.form.materialId = ''
			this.form.convertPro = ''
			this.form.storageLoss = ''
			}
			
		},
		// 获取食材种类
		materialTypeApi() {
			return new Promise((resolve) => {
				materialType({}).then((res) => {
					if (res.code === 1) {
						this.materialTypeList = res.data
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style scoped lang="less">
.card-title {
	font-size: 18px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	color: #202224;
	margin-bottom: 24px;
	line-height: 25px;
}

.cus-form {
	margin-top: 45px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	&-section {
		margin-right: 24px;
		margin-left: 24px;
		display: flex;
		flex-direction: column;
		margin-bottom: 24px;

		&-label {
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			line-height: 22px;
			margin-bottom: 6px;
		}
	}

}

.warning {
	position: absolute;
	color: #ffa929
}
</style>
